<script>
	import Hotel from "@/mall_subpages/merchants/detail/hotel.vue";
	import {
		getGoodsDetail,
		getEleCouponOrderCount,
		getPointsExchangeRatio,
		addProductCar
	} from "@/api/mall";
	import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";
	// 导入收藏相关API
	import {
		getCheckCollection,
		getAddCollection,
		getCancelCollection,
		footprint
	} from '@/api/homePage.js'
	// 导入商品评论API
	import {
		getProductEvaluations
	} from '@/api/mall.js'
	import {
		getHotelGoodsTmplData,
		getRestaurantGoodsTmplData,
		getPartyGoodsDetail,
		getTravelPhotographyGoodsDetail,
		getProjectActivityGoodsDetail
	} from '@/api/ws.js';
	import RoomDetail from './components/room-detail.vue';
	import FoodsDetail from './components/foods-detail.vue';
	import PhotoDetail from './components/photo-detail.vue';
	import PartyDetail from './components/party-detail.vue';
	import ActiveDetail from './components/active-detail.vue';
	// 导入规格选择弹窗组件
	import SpecPopup from '../components/spec-popup.vue';

	export default {
		name: "index",
		components: {
			HzSafeArea,
			Hotel,
			RoomDetail,
			FoodsDetail,
			PhotoDetail,
			PartyDetail,
			ActiveDetail,
			SpecPopup
		},
		data() {
			return {
				bookType: '', // 套餐进来参数为tc
				goodsType: null,
				detail: {}, //商品详情
				goodsId: 0, //商品ID
				topBanner: [], //顶部banner
				detailsText: "",
				isCollected: false, // 是否已收藏
				reviewsList: [], // 评论列表
				reviewsTotal: 0, // 评论总数
				page: 1, // 当前评论页码
				signupCount: 0, // 活动报名人数
				isSubmitting: false, // 是否正在提交订单
				submitTimer: null, // 节流定时器
				isIntegralPay: false, // 是否使用积分支付
				pointsRatio: 1, // 积分兑换比例
				mpHtmlType: '', // 存在此字段时，不渲染富文本内容  3|餐饮详情 4|入住详情
				mpHtmlDetail: undefined, // 酒店房间详情、餐饮美食详情、旅拍套餐详情、研学团建产品详情
				commentVisibleByMyHtml: true,
				// 购物车相关
				isAddingToCart: false, // 是否正在添加到购物车
			}
		},
		onLoad(options) {
			console.log(options)
			this.bookType = options.bookType || '';
			this.goodsType = options.type;
			this.goodsId = options.id;
			footprint({
				Id: this.goodsId
			})
			// 判断是否使用积分支付
			this.isIntegralPay = options.integral === 'true'

			switch (options.type) {
				case "2":
					uni.setNavigationBarTitle({
						title: "商品预定"
					})
					if (this.bookType === 'tc') {
						this.detailsText = "门票详情"
						this.mpHtmlType = '';
					} else if (this.bookType === 'sc') {
						this.detailsText = "商品详情"
						this.mpHtmlType = '';
					} else {
						this.mpHtmlType = '2';
					}
					break
				case "3":
					uni.setNavigationBarTitle({
						title: "商品详情"
					})
					if (this.bookType === 'tc') {
						this.detailsText = "美食详情"
						this.mpHtmlType = '';
					} else {
						this.mpHtmlType = '3';
					}
					break
				case "4":
					uni.setNavigationBarTitle({
						title: "住宿预定"
					})
					if (this.bookType === 'tc') {
						this.detailsText = "入住详情"
						this.mpHtmlType = '';
					} else {
						this.mpHtmlType = '4';
					}
					break
				case "5":
					uni.setNavigationBarTitle({
						title: "商品详情"
					})
					if (this.bookType === 'tc') {
						this.detailsText = "体验介绍"
						this.mpHtmlType = '';
					} else {
						this.mpHtmlType = '5';
					}
					break
				case "6":
					uni.setNavigationBarTitle({
						title: "商品详情"
					})
					if (this.bookType === 'tc') {
						this.detailsText = "体验介绍"
						this.mpHtmlType = '';
					} else {
						this.mpHtmlType = '6';
					}
					break
				case "8":
					uni.setNavigationBarTitle({
						title: "活动"
					})
					this.detailsText = "活动介绍"
					this.mpHtmlType = '';
					break

			}

			this.init()

			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		methods: {
			async init() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})

					const {
						Data
					} = await getGoodsDetail({
						Id: this.goodsId
					})

					// 调试输出
					if (this.goodsType === '8' && Data.ProductSpecList) {
						console.log('活动规格列表:', JSON.stringify(Data.ProductSpecList));
					}
					this.detail = Data
					// 格式化日期：将 2025-04-20 00:00:00 转换为 20250420
					const formatDate = (dateStr) => {
						if (!dateStr) return '';
						// 移除时间部分，只保留日期
						const dateOnly = dateStr.split(' ')[0];
						// 移除横线，转换为 YYYYMMDD 格式
						return dateOnly.replace(/-/g, '');
					};

					this.detail.activityTime = formatDate(this.detail.ProductSpecList[0].StartDate) + '-' + formatDate(
						this.detail.ProductSpecList[0].EndDate)
					if (Data.ImgList) {
						this.topBanner = Data.ImgList.split("|")
					}

					// 获取详情信息
					if (this.mpHtmlType) {
						this.getMpHtmlDetail(this.mpHtmlType);
					}

					// 检查是否已收藏
					this.checkCollectionStatus();

					// 获取评论数据
					this.getEvaluations();

					// 获取报名人数
					this.getSignupCount();

					// 获取积分兑换比例
					this.getPointsRatio()

					uni.hideLoading()
				} catch (e) {
					uni.hideLoading();
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
			},

			// 获取产品评论
			async getEvaluations() {
				try {
					const {
						Data
					} = await getProductEvaluations({
						Index: 1, // 默认获取第一页
						Size: 10,
						Id: this.goodsId
					});

					if (Data) {
						// 过滤出数字 key 的评论项
						const reviews = Object.keys(Data)
							.filter(key => !isNaN(Number(key)))
							.map(key => Data[key]);
						this.reviewsList = reviews;
						this.reviewsTotal = Data.length || 0;
					}
				} catch (error) {
					console.error('获取产品评论失败:', error);
				}
			},

			async getMpHtmlDetail(mpHtmlType) {
				let apiFn;
				switch (mpHtmlType) {
					case '2':
						apiFn = getProjectActivityGoodsDetail;
						break;
					case '3':
						apiFn = getRestaurantGoodsTmplData;
						break;
					case '4':
						apiFn = getHotelGoodsTmplData;
						break;
					case '5':
						apiFn = getPartyGoodsDetail;
						break;
					case '6':
						apiFn = getTravelPhotographyGoodsDetail;
					default:
						break;
				}
				if (apiFn) {
					try {
						/**
						 * 测试数据
						 * getRestaurantGoodsTmplData | 91
						 * getHotelGoodsTmplData | 61
						 * getTravelPhotographyGoodsDetail | 216
						 * getPartyGoodsDetail | 1
						 * getProjectActivityGoodsDetail | 1
						 */
						// const { code, result } = await apiFn(1);
						const {
							code,
							result
						} = await apiFn(this.goodsId);
						if (code === 200) this.mpHtmlDetail = result;
						console.log("详情 =======>", this.mpHtmlDetail);
					} catch (error) {
						this.mpHtmlDetail = undefined;
						console.error('获取富文本内容详情失败:', error);
					}
				}
			},
			myHtmlShowComment(isShowComment) {
				this.commentVisibleByMyHtml = isShowComment;
			},

			// 检查收藏状态
			async checkCollectionStatus() {
				try {
					const res = await getCheckCollection({
						CollectionType: 11, // 商品收藏类型
						Id: this.goodsId // 商品ID
					});

					if (res && res.Data) {
						this.isCollected = true;
					} else {
						this.isCollected = false;
					}
					console.log('商品收藏状态:', this.isCollected);
				} catch (error) {
					console.error('检查收藏状态失败:', error);
				}
			},

			// 切换收藏状态
			async toggleCollect() {
				try {
					if (this.isCollected) {
						// 取消收藏
						await getCancelCollection({
							CollectionType: 11, // 商品收藏类型
							Id: this.goodsId // 商品ID
						});

						this.isCollected = false;
						uni.showToast({
							title: '已取消收藏',
							icon: 'none',
							duration: 2000
						});
					} else {
						// 添加收藏
						await getAddCollection({
							CollectionType: 11, // 商品收藏类型
							Id: this.goodsId // 商品ID
						});

						this.isCollected = true;
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration: 2000
						});
					}
				} catch (error) {
					console.error('操作收藏失败:', error);
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 分享
			shareShop() {
				console.log('分享商品');
				// 此方法是为了兼容点击事件，实际分享功能由open-type="share"处理
			},

			// 添加节流函数
			throttle(fn, delay = 2000) {
				if (this.isSubmitting) return;
				this.isSubmitting = true;

				// 执行函数
				fn();

				// 设置定时器，delay后重置状态
				this.submitTimer = setTimeout(() => {
					this.isSubmitting = false;
				}, delay);
			},

			onReserve() {
				// 使用节流函数包装
				this.throttle(() => {
					// 立即购买直接跳转，不显示规格弹窗
					let params =
						`id=${this.goodsId}&type=${this.detail.Type}${this.isIntegralPay ? '&integral=true' : ''}`;
					if (this.detail.Type === 17) {
						// 如果是套餐类型，跳转到套餐预订页面
						// 参数增加 goodsType 用于判断是哪种产品进入套餐购买详情页
						params += `&goodsType=${this.goodsType}`;
						uni.navigateTo({
							url: `/mall_subpages/goods/package?${params}`
						})
					} else {
						// 其他类型商品跳转到普通预订页面
						uni.navigateTo({
							url: `/mall_subpages/goods/predetermined?${params}`
						})
					}
				});
			},

			// 直接跳转到预订页面（不经过规格选择）
			directReserve() {
				let params = `id=${this.goodsId}&type=${this.detail.Type}${this.isIntegralPay ? '&integral=true' : ''}`;
				if (this.detail.Type === 17) {
					// 如果是套餐类型，跳转到套餐预订页面
					// 参数增加 goodsType 用于判断是哪种产品进入套餐购买详情页
					params += `&goodsType=${this.goodsType}`;
					uni.navigateTo({
						url: `/mall_subpages/goods/package?${params}`
					})
				} else {
					// 其他类型商品跳转到普通预订页面
					uni.navigateTo({
						url: `/mall_subpages/goods/predetermined?${params}`
					})
				}
			},

			// 预览评价图片
			previewImage(imgList, index) {
				uni.previewImage({
					current: imgList[index],
					urls: imgList
				})
			},

			// 导航到指定地址
			navigateTo(address) {
				// 如果没有地址，显示提示
				if (!address) {
					uni.showToast({
						title: this.$t('goods.noLocation'),
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 提取经纬度信息
				let latitude = 0;
				let longitude = 0;

				// 检查两种可能的经纬度格式
				if (this.detail.Latitude && this.detail.Longitude) {
					// 使用单独的经纬度字段
					latitude = parseFloat(this.detail.Latitude);
					longitude = parseFloat(this.detail.Longitude);
				} else if (this.detail.LatitudeAndLongitude) {
					// 使用组合的经纬度字段
					const coords = this.detail.LatitudeAndLongitude.split(',');
					if (coords.length === 2) {
						latitude = parseFloat(coords[0]);
						longitude = parseFloat(coords[1]);
					}
				}

				// 检查经纬度是否有效
				const hasValidCoords = !isNaN(latitude) && !isNaN(longitude) &&
					latitude !== 0 && longitude !== 0;

				uni.openLocation({
					name: this.detail.Name || '活动地点',
					address: address,
					latitude: latitude,
					longitude: longitude,
					success: () => {
						console.log('打开地图成功');
					},
					fail: (err) => {
						console.error('打开地图失败:', err);
						// 如果获取不到经纬度，尝试用地址搜索
						uni.showToast({
							title: '请手动搜索: ' + address,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			// 拨打电话
			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败:', err);
					}
				});
			},

			// 获取报名人数
			async getSignupCount() {
				if (this.goodsType !== '8') return;

				try {
					const {
						Data
					} = await getEleCouponOrderCount({
						ProductId: this.goodsId
					});

					if (Data !== null && Data !== undefined) {
						this.signupCount = Data.TotalPersonCount || 0;
						console.log('活动报名人数:', this.signupCount);
					}
				} catch (error) {
					console.error('获取报名人数失败:', error);
				}
			},

			// 获取积分兑换比例
			async getPointsRatio() {
				try {
					const res = await getPointsExchangeRatio();
					const data = res.Data;
					this.pointsRatio = data.PointToCNYRatio;
					console.log('获取到积分比例:', this.pointsRatio);
				} catch (error) {
					console.error('获取积分比例失败:', error);
					this.pointsRatio = 1;
				}
			},

			// 显示规格选择弹窗 - 立即购买
			showSpecForBuy() {
				if (this.detail.ProductSpecList && this.detail.ProductSpecList.length > 0) {
					this.$refs.specPopup.loadData();
					this.$refs.specPopup.show(1); // 1表示立即购买
				} else {
					// 没有规格时直接跳转
					this.onReserve();
				}
			},

			// 显示规格选择弹窗 - 加入购物车
			showSpecForCart() {
				if (this.detail.ProductSpecList && this.detail.ProductSpecList.length > 0) {
					this.$refs.specPopup.loadData();
					this.$refs.specPopup.show(2); // 2表示加入购物车
				} else {
					// 没有规格时使用默认规格
					this.addToCartDirect();
				}
			},

			// 直接加入购物车（无规格或使用默认规格）
			async addToCartDirect() {
				if (this.isAddingToCart) return;

				try {
					this.isAddingToCart = true;

					// 使用默认规格或第一个规格
					const productSpecId = this.detail.ProductSpecList && this.detail.ProductSpecList.length > 0 ?
						this.detail.ProductSpecList[0].Id :
						'';

					await this.addToCart({
						BusinessId: this.detail.BusinessId,
						ProductId: this.goodsId,
						ProductSpecId: productSpecId,
						Num: 1
					});

				} catch (error) {
					console.error('加入购物车失败:', error);
				} finally {
					this.isAddingToCart = false;
				}
			},

			// 处理规格选择弹窗的立即购买事件
			handleSpecBuy(specInfo) {
				console.log('规格选择立即购买:', specInfo);
				this.$refs.specPopup.hide();

				// 使用选中的规格信息跳转到预订页面
				const params =
					`id=${this.goodsId}&type=${this.detail.Type}${this.isIntegralPay ? '&integral=true' : ''}&specId=${specInfo.ProductSpecId}`;

				if (this.detail.Type === 17) {
					uni.navigateTo({
						url: `/mall_subpages/goods/package?${params}&goodsType=${this.goodsType}`
					});
				} else {
					uni.navigateTo({
						url: `/mall_subpages/goods/predetermined?${params}`
					});
				}
			},

			// 处理规格选择弹窗的加入购物车事件
			async handleSpecAddCart(specInfo) {
				console.log('规格选择加入购物车:', specInfo);
				this.$refs.specPopup.hide();

				try {
					await this.addToCart({
						BusinessId: this.detail.BusinessId,
						ProductId: specInfo.ProductId,
						ProductSpecId: specInfo.ProductSpecId,
						Num: specInfo.number
					});
				} catch (error) {
					console.error('加入购物车失败:', error);
				}
			},

			// 调用加入购物车接口
			async addToCart(params) {
				if (this.isAddingToCart) return;

				this.isAddingToCart = true;

				try {
					uni.showLoading({
						title: '加入购物车中...',
						mask: true
					});

					const result = await addProductCar(params);

					uni.hideLoading();

					if (result && result.Success !== false) {
						uni.showToast({
							title: '已加入购物车',
							icon: 'success',
							duration: 2000
						});
					} else {
						throw new Error(result.Msg || '加入购物车失败');
					}

				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: error.Msg || error.message || '加入购物车失败',
						icon: 'none',
						duration: 2000
					});
				} finally {
					this.isAddingToCart = false;
				}
			},
		},
		computed: {
			// 获取活动时间范围
			getActivityTimeRange() {
				// 格式化日期函数，只保留YYYY-MM-DD部分
				const formatDate = (dateStr) => {
					if (!dateStr) return '';
					// 如果包含空格，说明有时间部分，截取空格前的日期部分
					if (dateStr.includes(' ')) {
						return dateStr.split(' ')[0];
					}
					return dateStr;
				};

				// 如果有ProductSpecList且不为空，则从中获取时间
				if (this.detail && this.detail.ProductSpecList && this.detail.ProductSpecList.length > 0) {
					const spec = this.detail.ProductSpecList[0];
					if (spec.StartDate && spec.EndDate) {
						return `${formatDate(spec.StartDate)} 至 ${formatDate(spec.EndDate)}`;
					}
				}

				// 如果从ProductSpecList获取不到，尝试从detail直接获取
				if (this.detail && this.detail.StartDate && this.detail.EndDate) {
					return `${formatDate(this.detail.StartDate)} 至 ${formatDate(this.detail.EndDate)}`;
				}

				// 都获取不到则显示暂无信息
				return '暂无活动时间信息';
			},
			isActiveValid() {
				if (this.goodsType !== '8') return true;
				if (this.detail && this.detail.ProductSpecList && this.detail.ProductSpecList.length > 0) {
					const spec = this.detail.ProductSpecList[0];
					if (!spec.EndDate) return true;
					const currentDate = new Date();
					const formattedEndDate = spec.EndDate.replace(/-/g, '/');
					const endDate = new Date(formattedEndDate);
					return currentDate <= endDate;
				}
				return true;
			}
		}
	}
</script>

<template>
	<view class="contain">
		<!-- banner部分 -->
		<view class="carousel-section">
			<u-swiper :list="topBanner" indicatorMode="dot" indicator indicatorStyle="bottom: 70rpx"
				height="450rpx"></u-swiper>
		</view>

		<!-- 主体内容 -->
		<view class="content">
			<!-- 标题和分享 -->
			<view class="header">
				<view class="header-inner">
					<view class="header-price">
						<view class="current-price">
							<template v-if="goodsType === '8' && !detail.ShowPrice">
								<text>免费</text>
							</template>
							<template v-else>
								<text class="symbol" v-if="!isIntegralPay">¥</text>
								<text class="price" v-if="!isIntegralPay">{{detail.ShowPrice || "-"}}</text>
								<text class="price"
									v-if="isIntegralPay">{{ Math.ceil(detail.ShowPrice * pointsRatio) || 0 }}</text>
								<text class="price-unit" v-if="isIntegralPay">积分</text>
							</template>
						</view>
						<!--            <view class="original-price"><text>¥</text><text>{{detail.MarketPrice || "-"}}</text></view>-->
					</view>
					<view class="title-wrap">
						<text class="title">{{detail.Name}}</text>
						<!--            <text class="title-sub">{{detail.Subtitle}}</text>-->
					</view>
				</view>
			</view>

			<!-- 活动信息展示区域 - 只在活动类型(type=8)显示 -->
			<view class="section activity-info" v-if="goodsType === '8'">
				<view class="activity-tags" v-if="detail.Tag">
					<text class="tag">{{detail.Tag}}</text>
				</view>
				<view class="activity-details">
					<view class="activity-item">
						<!-- <view class="icon-wrapper">
              <image src="/static/home/time.png" mode="aspectFit"></image>
            </view> -->
						<text class="info-label">时间：</text>
						<text class="info-content">{{detail.activityTime}}</text>
					</view>
					<view class="activity-item">
						<!-- <view class="icon-wrapper">
              <image src="/static/home/location.png" mode="aspectFit"></image>
            </view> -->
						<text class="info-label">地点：</text>
						<text class="info-content">{{detail.BusinessModel.Address || '海岛'}}</text>
						<view class="navigation-btn" @click="navigateTo(detail.BusinessModel.Address)">
							<text>导航去</text>
						</view>
					</view>
					<view class="activity-item">
						<!-- <view class="icon-wrapper">
              <image src="/static/home/phone.png" mode="aspectFit"></image>
            </view> -->
						<text class="info-label">联系电话：</text>
						<text class="info-content">{{detail.BusinessModel.Mobile || '400-500-6698'}}</text>
						<view class="call-btn" @click="makePhoneCall(detail.BusinessModel.Mobile || '400-500-6698')">
							<text>打电话</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 操作浮动按钮 -->
			<view class="float-btns">
				<view class="collect-btn" @click="toggleCollect">
					<image :src="isCollected ? 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530139634.png'
          : 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530083228.png'" mode="aspectFit"></image>
					<text>{{isCollected ? $t('detail.collected') : $t('detail.collect')}}</text>
				</view>
				<view class="share-btn" @click="shareShop">
					<image src="https://wzws.wanshanlundiao.cn/upload/img/20250407/202504071011497781.png"
						mode="aspectFit"></image>
					<text>{{$t('detail.share')}}</text>
					<button open-type="share" class="share-open-btn"></button>
				</view>
			</view>

			<!-- 详情 -->
			<view>
				<view v-if="!mpHtmlType" class="section details">
					<view class="section-title">
						<text>{{ detailsText }}</text>
					</view>
					<mp-html :content="detail.Substance" />
				</view>
				<view v-else>
					<template v-if="mpHtmlDetail">
						<active-detail v-if="mpHtmlType === '2'" :active-detail="mpHtmlDetail"
							@myHtmlShowComment="myHtmlShowComment" />
						<foods-detail v-if="mpHtmlType === '3'" :foods-detail="mpHtmlDetail"
							@myHtmlShowComment="myHtmlShowComment" />
						<room-detail v-if="mpHtmlType === '4'" :room-detail="mpHtmlDetail" />
						<party-detail v-if="mpHtmlType === '5'" :party-detail="mpHtmlDetail"
							@myHtmlShowComment="myHtmlShowComment" />
						<photo-detail v-if="mpHtmlType === '6'" :photo-detail="mpHtmlDetail"
							@myHtmlShowComment="myHtmlShowComment" />
					</template>
				</view>
			</view>

			<!-- 评价列表 -->
			<view class="section review-section" v-if="goodsType !== '8' && commentVisibleByMyHtml">
				<view class="section-title">
					<text>{{$t('goods.reviews')}}({{reviewsTotal}})</text>
				</view>
				<view class="reviews-list">
					<!-- 评价项 -->
					<view class="review-item" v-for="(item, index) in reviewsList" :key="index">
						<view class="review-header">
							<view class="user-avatar">
								<image :src="item.HeadImg || '/static/my/user.png'" mode="aspectFill"></image>
							</view>
							<view class="user-info">
								<text class="user-name">{{item.UserName || '匿名用户'}}</text>
								<text class="review-date">{{item.AddTime || ''}}</text>
							</view>
						</view>
						<view class="review-content">
							<text>{{item.Message || ''}}</text>
							<!-- 评价图片列表 -->
							<view class="review-images" v-if="item.ImgList && item.ImgList.split('|').length > 0">
								<view class="image-list">
									<image v-for="(img, imgIndex) in item.ImgList.split('|')" :key="imgIndex" :src="img"
										mode="aspectFill" @click="previewImage(item.ImgList.split('|'), imgIndex)">
									</image>
								</view>
							</view>
						</view>
					</view>

					<!-- 无评论时显示 -->
					<view class="no-reviews" v-if="reviewsList.length === 0">
						<text>{{$t('goods.noReviews')}}</text>
					</view>
				</view>
			</view>
			<hz-safe-area background="#F5F6F7"></hz-safe-area>
		</view>
		<view class="bottom-btn">
			<view class="bottom-inner">
				<view class="left-info">
					<view class="price-info">
						<template v-if="goodsType === '8' && !detail.ShowPrice">
							<text>免费</text>
						</template>
						<template v-else>
							<text class="symbol" v-if="!isIntegralPay">¥</text>
							<text class="price" v-if="!isIntegralPay">{{detail.ShowPrice}}</text>
							<text class="price" v-if="isIntegralPay">{{ Math.ceil(detail.ShowPrice * pointsRatio) || 0 }}</text>
							<text class="price-unit" v-if="isIntegralPay">积分</text>
						</template>
					</view>

				</view>
				<!-- 活动类型显示报名人数 -->
				<view class="signup-info" v-if="goodsType === '8'">
					<text class="signup-count">{{$t('goods.signedCount', {count: signupCount})}}</text>
				</view>

				<!-- 商品类型(type=2)显示购物车和立即购买两个按钮 -->
				<!--     <view v-if="goodsType === '2' && isActiveValid" class="btn-group">
          <view 
            class="cart-btn"
            :class="{'disabled': isAddingToCart}"
            @click="showSpecForCart"
          >
            <text v-if="!isAddingToCart">{{$t('goods.addToCart')}}</text>
            <text v-else>{{$t('goods.adding')}}</text>
          </view>
          <view
            class="reserve-btn"
            :class="{'disabled': isSubmitting}"
            @click="onReserve"
          >
            <text v-if="!isSubmitting && !isIntegralPay">{{$t('goods.buyNow')}}</text>
            <text v-if="!isSubmitting && isIntegralPay">{{$t('goods.pointsExchange')}}</text>
            <text v-if="isSubmitting">{{$t('goods.processing')}}</text>
          </view>
        </view> -->

				<!-- 其他类型显示单个按钮 -->
				<view v-if="isActiveValid" class="reserve-btn single-btn" :class="{'disabled': isSubmitting}"
					@click="onReserve">
					<text v-if="!isSubmitting && goodsType !== '8' && !isIntegralPay">{{$t('goods.buyNow')}}</text>
					<text
						v-if="!isSubmitting && goodsType !== '8' && isIntegralPay">{{$t('goods.pointsExchange')}}</text>
					<text v-if="!isSubmitting && goodsType === '8'">{{$t('goods.activitySignUp')}}</text>
					<text v-if="isSubmitting">{{$t('goods.processing')}}</text>
				</view>
			</view>
			<hz-safe-area></hz-safe-area>
		</view>

		<!-- 规格选择弹窗 -->
		<spec-popup ref="specPopup" :goodsDetail="detail" @buy="handleSpecBuy" @addCar="handleSpecAddCart"></spec-popup>
	</view>
</template>

<style scoped lang="scss">
	.contain {
		min-height: 100vh;
	}

	.content {
		margin-top: -40rpx;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #F5F6F7;
		position: relative;
		z-index: 1;
		overflow: hidden;
		padding-bottom: 100rpx;
		min-height: calc(100vh - 415rpx);
	}

	.header {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;

		.header-inner {
			flex: 1;
		}

		.header-price {
			display: flex;
			align-items: baseline;
			margin-bottom: 15rpx;

			.current-price {
				color: #FF4B31;
				font-weight: 600;

				.symbol {
					font-size: 24rpx;
					margin-right: 2rpx;
				}

				.price {
					font-size: 40rpx;
				}
			}

			.original-price {
				font-size: 24rpx;
				color: #999;
				margin-left: 15rpx;
				text-decoration: line-through;
			}
		}

		.title-wrap {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 15rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}

			.title-sub {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 活动信息样式 */
	.activity-info {
		background-color: #fff;
		margin-bottom: 30rpx;

		.activity-tags {
			margin-bottom: 20rpx;

			.tag {
				display: inline-block;
				background-color: #F5F7FF;
				color: #498FFF;
				padding: 6rpx 20rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
				margin-right: 10rpx;
			}
		}

		.activity-details {
			.activity-item {
				display: flex;
				align-items: center;
				padding: 16rpx 0;

				.icon-wrapper {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info-label {
					font-size: 28rpx;
					color: #666;
					white-space: nowrap;
				}

				.info-content {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					margin-right: 15rpx;
				}

				.navigation-btn,
				.call-btn {
					background: #F5F7FF;
					color: #498FFF;
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
					font-size: 24rpx;

					text {
						color: #498FFF;
					}
				}

				.call-btn {
					background: #FFF2F0;

					text {
						color: #FF4B31;
					}
				}
			}
		}
	}

	/* 浮动操作按钮 */
	.float-btns {
		position: absolute;
		top: 0;
		right: 30rpx;
		z-index: 10;
		display: flex;

		.share-btn,
		.collect-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 6rpx;
			}

			text {
				font-size: 20rpx;
				color: #666;
			}

			.share-open-btn {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;

				&::after {
					display: none;
				}
			}
		}

		.share-btn {
			background: #ffffff;
		}

		.collect-btn {
			background: #ffffff;

			&.active {
				text {
					color: #ff6633;
				}
			}
		}
	}

	.detail-info {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.info-item {
		display: flex;
		font-size: 24rpx;
		margin-bottom: 15rpx;

		&:last-child {
			margin-bottom: 0;
		}

		text:first-child {
			width: 160rpx;
			color: #999;
		}

		text:last-child {
			flex: 1;
			color: #333;
		}
	}

	.details {
		background-color: #fff;
		margin-bottom: 30rpx;
	}

	.section {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;

		.section-title {
			padding: 0 0 20rpx 0;

			text {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				position: relative;
			}
		}
	}

	.reviews-list {
		.review-item {
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.review-header {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				.user-avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.user-info {
					display: flex;
					flex-direction: column;

					.user-name {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}

					.review-date {
						font-size: 24rpx;
						color: #999;
						margin-top: 4rpx;
					}
				}
			}

			.review-content {
				padding-left: 85rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;

				text {
					display: block;
					margin-bottom: 10rpx;
				}

				.review-images {
					margin-top: 15rpx;

					.image-list {
						display: flex;
						flex-wrap: wrap;
						gap: 10rpx;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 99;

		.bottom-inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;
			gap: 20rpx;

			.left-info {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.price-info {
					display: flex;
					align-items: baseline;
					color: #FF4B31;
					font-weight: 600;

					.symbol {
						font-size: 24rpx;
						margin-right: 2rpx;
					}

					.price {
						font-size: 40rpx;
					}
				}
			}

			.signup-info {
				flex: 1;
				text-align: right;
				margin-top: 4rpx;

				.signup-count {
					font-size: 28rpx;
					color: #666;
				}
			}

			// 按钮组样式（购物车+立即购买）
			.btn-group {
				display: flex;
				gap: 20rpx;

				.cart-btn {
					background: #F5F7FF;
					color: #498FFF;
					font-size: 28rpx;
					font-weight: 500;
					padding: 16rpx 30rpx;
					border-radius: 40rpx;
					border: 2rpx solid #498FFF;

					&.disabled {
						background: #f0f0f0;
						color: #999;
						border-color: #ddd;
						opacity: 0.8;
					}
				}

				.reserve-btn {
					background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
					color: #fff;
					font-size: 28rpx;
					font-weight: 500;
					padding: 16rpx 40rpx;
					border-radius: 40rpx;

					&.disabled {
						background: linear-gradient(135deg, #a0b8dd 0%, #8ca5ce 100%);
						opacity: 0.8;
					}
				}
			}

			// 单个按钮样式
			.reserve-btn.single-btn {
				background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
				color: #fff;
				font-size: 30rpx;
				font-weight: 500;
				padding: 16rpx 50rpx;
				border-radius: 40rpx;

				&.disabled {
					background: linear-gradient(135deg, #a0b8dd 0%, #8ca5ce 100%);
					opacity: 0.8;
				}
			}
		}
	}

	.price-unit {
		font-size: 24rpx;
		margin-left: 5rpx;
		color: #FF4B31;
	}
</style>